<template>
  <div class="home">
    <Menu></Menu>
    <div>
      <div class="mian_shop">
        <div class="mian_nav">
          <h1>KNITWEAR</h1>
          <h1>NEW ARRIVALS</h1>
          <p>
            Explore the latest additions to our best-in-class line up
            of sweaters, cardigans, hoodies and more.
          </p>
          <div class="shop">
            <a href="#">SHOP MEN</a>
            <a href="#">SHOP WOMEN</a>
          </div>
        </div>
      </div>
      <!-- 屏幕宽度大于1024时 -->
      <div class="swiper" v-if="carouselMinWidth1024">
        <swiper :options="swiperOption">
          <!-- slides -->
          <swiper-slide>
            <ul>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
            </ul>
          </swiper-slide>
          <swiper-slide>
            <ul>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
            </ul>
          </swiper-slide>

          <!-- Optional controls -->

          <div class="swiper-button-prev swiper-button-img" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-img" slot="button-next"></div>
        </swiper>
        <div class="pagination">
          <div class="swiper-pagination m-self-mar" slot="pagination"></div>
        </div>
      </div>
      <!-- 屏幕宽度小于1024时 -->
       <div class="swiper" v-if="carouselMaxWidth1024">
        <swiper :options="swiperOption">
          <!-- slides -->
          <swiper-slide>
            <ul>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
            </ul>
          </swiper-slide>
          <swiper-slide>
            <ul>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
            </ul>
          </swiper-slide>
          <swiper-slide>
            <ul>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
              <li>
                <img
                  src="https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_460/cg-global/campaigns/190807/2207LBP_474.jpg"
                  alt
                />
                <p>Shop the women's Richmond Hoody Black Label Print</p>
              </li>
            </ul>
          </swiper-slide>

          <!-- Optional controls -->

          <div class="swiper-button-prev swiper-button-img" slot="button-prev"></div>
          <div class="swiper-button-next swiper-button-img" slot="button-next"></div>
        </swiper>
        <div class="pagination">
          <div class="swiper-pagination m-self-mar" slot="pagination"></div>
        </div>
      </div>
      <div class="home-story">
        <div class="story1">
          <h1>PACK LIGHT</h1>
          <p>Space-saving packable down jackets that’ll turn any overpacker into a travel minimalist.</p>
          <div class="shop">
            <a href="#">SHOP MEN</a>
            <a href="#">SHOP WOMEN</a>
          </div>
        </div>
      </div>
      <div class="home-story1">
        <div class="story2">
          <h1>TRAVEL COMPANIONS</h1>
          <p>Throw it on when the plane gets too cold. Pull the hood up when you need to block out the world. A hoody is there for every step of the journey.</p>
          <div class="shop">
            <a href="#">shop men</a>
            <a href="#">shop women</a>
          </div>
        </div>
      </div>
      <div class="home-story2">
        <div class="story3">
          <h1>TRAVEL COMPANIONS</h1>
          <p>Throw it on when the plane gets too cold. Pull the hood up when you need to block out the world. A hoody is there for every step of the journey.</p>
          <div class="shop">
            <a href="#">shop men</a>
            <a href="#">shop women</a>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Menu from "../components/Menu";
import Footer from "../components/Footer";
export default {
  data() {
    return {
      swiperOption: {
        // autoplay: true,
        loop: true, 
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        pagination: {
          el: ".swiper-pagination",
          // bulletActiveClass: "my-bullet-active"
        }
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
      },
      carouselMinWidth1024: '',
      carouselMaxWidth1024: ''
    };
  },
  components: {
    Menu,
    Footer
  },
  created () {
    if (window.screen.width >= 1024) {
      this.carouselMinWidth1024 = true;
    } else {
      this.carouselMaxWidth1024 = true;
    }
  }
};
</script>
<style lang="less" scoped>
@media screen and (max-width: 1024px) {
  @import url(../assets/css/mobile_home.less);
}
@media screen and (min-width: 1024px) {
  @import url(../assets/css/pc_home.less);
}
</style>

